<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="5">
				<h2 style="text-align: center;margin-left: 10px;">课程选择</h2>
				<el-table :data="courseData" border style="margin: 20px;" @row-click="courseClick">
					<el-table-column align="center" prop="id" label="编号"></el-table-column>
					<el-table-column align="center" prop="courseName" label="课程名称"></el-table-column>
				</el-table>
			</el-col>
			<el-col :span="9">
				<div>
					<h2 style="text-align: center;margin-left: 10px;">作业选择</h2>
					<el-button @click="addWork = true" style="float: right;margin-bottom: 20px;">添加作业</el-button>
				</div>
				<el-table :data="workData" border style="margin: 20px;" @row-click="workClick">
					<el-table-column align="center" prop="id" label="编号"></el-table-column>
					<el-table-column align="center" prop="workTitle" label="作业名称"></el-table-column>
					<el-table-column align="center" prop="createTime" label="发布时间"></el-table-column>
					<el-table-column align="center" prop="endTime" label="截至时间"></el-table-column>
					<el-table-column align="center" prop="teacherName" label="老师名称"></el-table-column>
					<el-table-column align="center" label="状态">
						<template slot-scope="scope">
							{{compare(scope.row.endTime)==true? "未截止":"已截止"}}
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="9">
				<h2 style="text-align: center;margin-left: 10px;">作业完成情况</h2>
				<el-table :data="classData" border style="margin: 20px;">
					<el-table-column align="center" prop="id" label="编号"></el-table-column>
					<el-table-column align="center" prop="className" label="班级名称"></el-table-column>
					<el-table-column align="center" prop="bl" label="完成情况"></el-table-column>
					<el-table-column align="center" label="作业下载">
						<template slot-scope="scope">
							<el-button @click="downClassWork(scope.row.id,scope.row.className)">下载作业</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!-- 展示科目 -->
		<!-- 添加作业提示框 -->
		
		<el-dialog :visible.sync="addWork" title="发布作业" >
				<el-form :model="work" inline>
					<el-form-item label="作业标题">
						<el-input v-model="work.title"></el-input>
					</el-form-item>
					<el-form-item label="截至时间">
							 <el-date-picker
									value-format="yyyy-MM-dd HH:mm:ss"
							      v-model="work.endTime"
							      type="datetime"
							      placeholder="选择日期时间">
							    </el-date-picker>
					</el-form-item>
					<el-upload
						:on-success="handle_success"
					  class="upload-demo"
					  drag
					  ref="upload"
					  :file-list="fileList"
					  :auto-upload="false"
					  :data="work"
					  :limit="1"
					  action="http://localhost:9090/work"
					  multiple>
					  <i class="el-icon-upload"></i>
					  <div class="el-upload__text">将作业拖到此处，或<em>点击上传</em></div>
					</el-upload>
				</el-form>
			
				<div slot="footer" class="dialog-footer">
			      <el-button @click="addWork = false">取 消</el-button>
			      <el-button type="primary" @click="submit">确 定</el-button>
			    </div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		created() {
			this.getCourseData()
		},
		data(){
			return{
				courseId:"",
				fileList:[],
				work:{
					endTime:"",
					title:""
				},
				workId:0,
				addWork:false,
				courseData:[],
				workData:[],
				classData:[],
				class:[],
				user:{}
			}
		},
		methods:{
			downClassWork(classId,className){
				axios({
				        method: "get",
				        url: "http://localhost:9090/teacher/downClassWork/"+classId+"/"+this.workId,
				        responseType: "blob",
				      }).then(res=>{
						  let blob = new Blob([res.data], {type: "application/zip"}) //new一个二进制对象
						        let url = window.URL.createObjectURL(blob); //转化为url
						        const link = document.createElement("a"); //创建个a标签
						        link.href = url;
						        link.download = className+"班级作业";//重命名
						        link.click();
						        URL.revokeObjectURL(url); //释放内存
					  })
			},
			workClick(row,colunm,event){
				//发送请求查询该作业需要展示的班级
				this.workId = row.id
				this.request.get("/work/getClass/"+row.id).then(resp=>{
					this.classData = resp.data
				})
			},
			compare(date1,date2) {
				let dates1 = new Date(date1);
				let dates2 = new Date();
				if (dates1 > dates2) {
					return true
				} else {
					return false
				}
			},
			handle_success(res){
				if(res.code==200){
					//保存完成 刷新作业
					let data = {
						id:this.courseId
					}
					this.courseClick(data)
					this.addWork = false
					this.$message({
						type:"success",
						message:"发布成功！"
					})
				}
			},
			submit(){
				this.work.courseId = this.courseId;
				this.work.teacherId = this.user.id
				this.$refs.upload.submit();
			},
			getCourseData(){
				let user = JSON.parse(localStorage.getItem("user"))
				this.user = user
				this.request.get("/teacher/course/"+user.id).then(res=>{
					  res.data.forEach(item=>{
						if(item.teacherId!=null){
							this.courseData.push(item)
						}
					})
					
				})
			},
			courseClick(row,colunm,event){
				this.request.get("/work/getWork/"+row.id+"/"+this.user.id).then(resp=>{
					this.workData = resp.data
				})
				this.courseId = row.id
			}
		}
	}
</script>

<style>
	.upload-demo{
		margin-left: 220px;
	}
</style>